import React, {Component} from 'react';
import './login.less'
import logo from '../../assets/images/logo.png';
import {Form, Icon, Input, Button} from 'antd';
import {reqLogin} from '../../api/index';
import memoryUtils from '../../utils/memoryUtils';
import storageUtils from '../../utils/storageUtils';

/*
* 登录的路由组件*/
class Login extends Component {

    handleSubmit = (event) => {

        //阻止事件的默认行为
        event.preventDefault()

        //对所有表单字段进行验证
        this.props.form.validateFields(async (err, values) => {
            //验证成功
            if (!err) {
                // console.log('提交登录的ajax请求 ', values);
                //请求登录
                const {username, password} = values
                const result = await reqLogin(username, password)
                if (result.data.state === 1) {
                    //保存user
                    const user = result.data.user
                    memoryUtils.user = user//保存在内存中
                    storageUtils.saveUser(user)//保存到local中去
                    //保存token
                    const token=result.data.token
                    memoryUtils.token =token
                    storageUtils.saveToken(token)
                    //跳转到管理界面(不需要再回退回到登录)
                    this.props.history.push('/com_information')
                    // this.props.history.replace('/com_information')
                } else {
                    console.log('用户名或者密码不对，请联系管理员！')
                }
            } else {
                console.log('验证失败 ');
            }
        });

    }

    /*
    * 对密码进行自定义验证*/
    validatePwd = (rule, value, callback) => {
        if (!value) {
            callback('请输入密码！')
        }
        callback()//验证通过
    }

    render() {
        //如果用户已经登录，自动跳转至管理界面
        // const user = memoryUtils.user
        // if (user) {
        //     return <Redirect to='/com_information'/>
        // }

        //得到具有强大功能的form对象
        const form = this.props.form
        const {getFieldDecorator} = form
        return (
            <div className="login">
                <header className="login-header">
                    <img src={logo} alt="公司logo"/>
                    <h1>德利人力人事后台管理系统</h1>
                </header>
                <section className="login-content">
                    <h2>客户登录</h2>
                    <Form onSubmit={this.handleSubmit} className="login-form">
                        <Form.Item>
                            {
                                getFieldDecorator('username', {
                                    //声明式验证：直接使用别人定义好的验证规则进行验证
                                    //配置对象：属性名是特定的一些名称
                                    rules: [
                                        {required: true, message: '用户名必须输入!'},
                                        {whitespace: true, message: '不能为空!'},
                                    ],
                                })(<Input
                                        prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>}
                                        placeholder="用户名"
                                    />
                                )
                            }
                        </Form.Item>
                        <Form.Item>
                            {
                                getFieldDecorator('password', {
                                    rules: [
                                        {validator: this.validatePwd},
                                    ]

                                })(<Input
                                        prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>}
                                        type="password"
                                        placeholder="密码"
                                    />
                                )
                            }
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button">
                                登录
                            </Button>
                        </Form.Item>
                        <h3>忘记密码请联系13382795583</h3>
                    </Form>
                </section>
            </div>
        )
    }
}

/*
1、高阶函数
    1)一类特别的函数
        a.接受函数类型的参数
        b.返回值是函数
    2)常见
        a.定时器：setTimeout()/setInterval()
        b.Promise：Promise(()=>{}) then(value=>{},reason=>{})
        c.数组遍历相关的方法：forEach()/filter()/map()/reduce()/find()/findIndex()
        d.函数对象的bind()
        e.Form.create()()/getFieldDecorator()()
    3)高阶函数更新动态，更加具有扩展性

2、高阶组件
    1)本质就是一个函数
    2)接受一个组件（被包装组件），返回一个新的组件（包装组件），包装组件会向被包装组件传入特定属性
    3）作用：扩展组件的功能
    4）高阶组件也是高阶函数：接受一个组件函数，返回是一个新的组件函数

* */

/*
包装Form组件生成一个新的组件Form(Login)
新组件会向Form组件传递一个强大的对象属性：form
* */
const WrapLogin = Form.create()(Login)
export default WrapLogin
/*
* 1、前台表单验证

* 2、收集表单输入数据
* */

/*
* async和await
* 1、作用？
*简化Promise对象的使用：不用再使用.then来指定成功/失败的回调函数
* 以同步编码（没有回调函数了）方式实现异步流程
* 2、哪里写await？
*在返回Promise的表达式左侧写await：不想要promise，想要promise异步执行的成功的value数据
* 3、哪里写async？
* await所在函数（最近的）定义的左侧写async
* */